<template>
    <el-popover placement="right" width="590" trigger="hover" @show="show" @hide="hide">
        <el-table :data="tableData" v-el-table-infinite-scroll="loadData"
            :infinite-scroll-disabled="infiniteScrollDisabled" :infinite-scroll-delay="200" v-loading="loading" stripe
            border height="300">
            <el-table-column width="70" property="isRead" label="状态">
                <template slot-scope="scope">
                    <el-tooltip v-if="scope.row.isRead == 0" effect="dark" content="标记为已读" placement="top">
                        <el-button type="danger" size="mini" plain @click="readLetter(scope.row)">未读</el-button>
                    </el-tooltip>
                    <el-button v-else type="success" size="mini" plain>已读</el-button>
                </template>
            </el-table-column>
            <el-table-column width="90" property="title" label="标题" show-overflow-tooltip></el-table-column>
            <el-table-column width="200" property="content" label="内容" show-overflow-tooltip></el-table-column>
            <el-table-column width="140" property="createTime" label="时间" show-overflow-tooltip></el-table-column>
            <el-table-column width="70" label="操作">
                <template slot-scope="scope">
                    <el-button type="danger" size="mini" plain @click="deleteLetter(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="fa fa-bell letter" slot="reference">
            <div class="number" v-if="num != 0">{{ num }}</div>
        </div>
    </el-popover>
</template>

<script>

import ElTableInfiniteScroll from 'el-table-infinite-scroll';
import { systemApi, commonApi } from '@/api/api';
import tables from '@/utils/tables';
import form from '@/utils/form';


export default {
    directives: {
        'el-table-infinite-scroll': ElTableInfiniteScroll
    },
    mixins: [
        tables, form
    ],
    data() {
        return {
            num: 0,
            tableData: [],
            search: {
                size: 10,
                current: 1
            },
            total: 0,
            loading: true,
            infiniteScrollDisabled: false
        }
    },
    computed: {
        isButtom() {
            return this.tableData.length >= this.total
        }
    },
    created() {
        this.loadUnreadNum()
    },
    methods: {
        show() {
            this.onSubmit()
        },
        hide() {
            this.tableData = []
            this.resetSearchForm()
            this.infiniteScrollDisabled = false
        },
        loadUnreadNum() {
            systemApi.unreadNum().then((res) => {
                this.num = res.data.data.num
            }, commonApi.popoverErrorMessage).catch(commonApi.popoverErrorMessage)
        },
        onSubmit() {
            this.loading = true;
            let data = {
                receiveUserId: this.$store.state.userId,
                orderField: 'createTime',
                orderType: 'desc',
                isDeleted: 0,
                ...this.search
            }
            commonApi.page("letter", data).then(res => {
                this.loadPage(res)
                this.loading = false;
            })
        },
        async loadData() {
            //没有到底继续加载
            if (!this.isButtom) {
                this.loading = true;
                this.search.current++;
                let data = {
                    'receiveUserId': this.$store.state.userId,
                    'orderField': 'createTime',
                    'orderType': 'desc',
                    'isDeleted': 0,
                    ...this.search
                }
                let res = await commonApi.page("letter", data);
                if (res.data.data.records != null) {
                    this.tableData.push(...res.data.data.records)
                }
                this.loading = false
            } else {
                //到底了禁用继续加载功能
                this.infiniteScrollDisabled = true
            }
        },
        readLetter(row) {
            //如果是未读的，点击后向后台发请求,标记为已读
            if (row.isRead == 0) {
                let data = { 'letterId': row.id, 'isRead': 1, 'isDeleted': row.isDeleted }
                this.updateLetter(data);
            }
        },
        deleteLetter(row) {
            let data = { 'letterId': row.id, 'isRead': row.isRead, 'isDeleted': 1 }
            this.updateLetter(data);
        },
        updateLetter(data) {
            systemApi.updateLetter(data).then((res) => {
                this.loadUnreadNum()
                this.tableData = []
                this.onReset()
                commonApi.popoverSuccessMessage(res)
            }, commonApi.popoverErrorMessage).catch(commonApi.popoverErrorMessage)
        }
    }
}
</script>

<style lang="scss" scoped>
.letter {
    position: relative;

    &:hover {
        cursor: pointer
    }

    .number {
        position: absolute;
        height: 16px;
        min-width: 16px;
        top: 0;
        left: 0;
        transform: translate(11px, -9px);
        background-color: red;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: small;
        font-weight: bold;
        color: #FFFFFF;
    }

}
</style>
